<template>
  <div class="wrapper">
    <el-row :gutter="20">
      <el-col :span="14">
        <div class="advertising">
          <div class="share">
            <div class="Lung">
                <span class="spn1">
                  <el-input v-model="subj" placeholder="请输入标题"></el-input>
                </span>
            </div>
          </div>
          <div class="tabs">
            <div class="label" :class="{'label_0': isA}" @click="ABOUT">关于</div>
            <div class="label" :class="{'label_0': isB}" @click="SYMPTOMS">症状</div>
            <div class="label" :class="{'label_0': isC}" @click="TREATMENTS">疗程</div>
          </div>
          <!--关于-->
          <div v-show="isA" class="ABOUT">
            <div>
              <upload :echo="echo" @returnValue="returnValue1"></upload>
            </div>
            <div class="explain">
              <span>
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="说明"
                  v-model="define"></el-input>
              </span>
            </div>
            <div class="Common">
              <div class="Common_c">共同</div>
            </div>
            <div class="UtTKTd">
              <el-checkbox v-model="cure">是否由专业人员治疗</el-checkbox>
              <el-checkbox v-model="diagnose">是否需要医学诊断</el-checkbox>
              <el-checkbox v-model="imaging">是否需要检测或成像</el-checkbox>
              <el-checkbox v-model="illness">是否是慢性疾病</el-checkbox>
            </div>
            <div class="yfM7Gf">
              <VueUeditorWrap v-model="msg" :config="myConfig"></VueUeditorWrap>
            </div>
            <div class="K9xsvf">
              <div class="CTannb">年龄受到影响</div>
              <div class="receive">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div>
                      <span class="age">0-2:</span>
                      <el-input v-model="age1" style="display: inline-block;width: 150px"></el-input>
                    </div>
                    <div>
                      <span class="age">6-13:</span>
                      <el-input v-model="age3" style="display: inline-block;width: 150px"></el-input>
                    </div>
                    <div>
                      <span class="age">19-40:</span>
                      <el-input v-model="age5" style="display: inline-block;width: 150px"></el-input>
                    </div>
                    <div>
                      <span class="age">60+:</span>
                      <el-input v-model="age7" style="display: inline-block;width: 150px"></el-input>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div>
                      <span class="age">3-5:</span>
                      <el-input v-model="age2" style="display: inline-block;width: 150px"></el-input>
                    </div>
                    <div>
                      <span class="age">14-18:</span>
                      <el-input v-model="age4" style="display: inline-block;width: 150px"></el-input>
                    </div>
                    <div>
                      <span class="age">41-60:</span>
                      <el-input v-model="age6" style="display: inline-block;width: 150px"></el-input>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="K9xsvf">
              来源：
              <el-input v-model="source" placeholder="请输入来源" class="handle-input"></el-input>
            </div>
          </div>
          <!--症状-->
          <div v-show="isB" class="SYMPTOMS">
            <div>
              <div class="MqFglb">
                <span>医学症状</span>
              </div>
              <div class="K9xsvf">
                <span>
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="说明"
                    v-model="Typical_symptoms"></el-input>
                </span>
              </div>
            </div>
            <div class="SwqzDd">
              <VueUeditorWrap v-model="msg1" :config="myConfig1"></VueUeditorWrap>
            </div>
            <div class="K9xsvf">
              来源：
              <el-input v-model="source1" placeholder="请输入来源" class="handle-input"></el-input>
            </div>
          </div>
          <!--疗程-->
          <div v-show="isC" class="TREATMENTS">
            <h1>疗程</h1>
          </div>
        </div>
      </el-col>
      <el-col :span="9" :offset="1">
        <div>
          <div class="advertising">
            <div class="share">
              <div class="Lung">
                <span class="spn1">{{subj}}</span>
              </div>
            </div>
            <div class="tabs">
              <div class="label" :class="{'label_0': isA}" @click="ABOUT">关于</div>
              <div class="label" :class="{'label_0': isB}" @click="SYMPTOMS">症状</div>
              <div class="label" :class="{'label_0': isC}" @click="TREATMENTS">疗程</div>
            </div>
            <!--关于-->
            <div v-show="isA" class="ABOUT">
              <div class="img">
                <img :src="picture" v-if="picture" height="280" width="100%"/>
              </div>
              <div class="explain">
                <span>{{define}}</span>
              </div>
              <div class="Common">
                <div class="Common_c">共同</div>
              </div>
              <div class="UtTKTd">
                <div v-show="cure">
                  <img style="vertical-align: middle;" src="../../../static/img1/药瓶.png" height="20" width="20"/>
                  <span class="S1C7Re">治疗有帮助，但这种病无法治愈</span>
                </div>
                <div v-show="diagnose">
                  <img style="vertical-align: middle;" src="../../../static/img1/本子.png" height="20" width="20"/>
                  <span class="S1C7Re">需要医学症状</span>
                </div>
                <div v-show="imaging">
                  <img style="vertical-align: middle;" src="../../../static/img1/心电图.png" height="20" width="20"/>
                  <span class="S1C7Re">通常需要实验室测试或成像</span>
                </div>
                <div v-show="illness">
                  <img style="vertical-align: middle;" src="../../../static/img1/时钟.png" height="20" width="20"/>
                  <span class="S1C7Re">慢性：可持续数年或终生</span>
                </div>
              </div>
              <div class="yfM7Gf" v-html="msg"></div>
              <div class="K9xsvf">
                <div class="CTannb">年龄受到影响</div>
                <div>
                  <table class="dkJQbe">
                    <tbody>
                    <tr>
                      <td class="Y77G4d">0-2:</td>
                      <td>
                        <div style="width: 0%" id="nianling1"></div>
                      </td>
                    </tr>
                    <tr>
                      <td class="Y77G4d">3-5:</td>
                      <td>
                        <div style="width: 0%" id="nianling2"></div>
                      </td>
                    </tr>
                    <tr>
                      <td class="Y77G4d">6-13:</td>
                      <td>
                        <div style="width: 0%" id="nianling3"></div>
                      </td>
                    </tr>
                    <tr>
                      <td class="Y77G4d">14-18:</td>
                      <td>
                        <div style="width: 0%" id="nianling4"></div>
                      </td>
                    </tr>
                    <tr>
                      <td class="Y77G4d">19-40:</td>
                      <td>
                        <div style="width: 0%" id="nianling5"></div>
                      </td>
                    </tr>
                    <tr>
                      <td class="Y77G4d">41-60:</td>
                      <td>
                        <div style="width: 0%" id="nianling6"></div>
                      </td>
                    </tr>
                    <tr>
                      <td class="Y77G4d">60+:</td>
                      <td>
                        <div style="width: 0%" id="nianling7"></div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="K9xsvf">来源：{{source}}</div>
            </div>
            <!--症状-->
            <div v-show="isB" class="SYMPTOMS">
              <div>
                <div class="MqFglb">
                  <span>医学症状</span>
                </div>
                <div class="K9xsvf">
                  <span>{{Typical_symptoms}}</span>
                </div>
              </div>
              <div class="SwqzDd" v-html="msg1"></div>
              <div class="K9xsvf">来源：{{source1}}</div>
            </div>
            <!--疗程-->
            <div v-show="isC" class="TREATMENTS">
              <h1>疗程</h1>
            </div>
          </div>

        </div>
      </el-col>
    </el-row>
    <div style="padding: 10px 0 0 0;text-align: center">
      <el-button type="primary" @click="submit">主要按钮</el-button>
    </div>
  </div>
</template>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap'
  import upload from './upload.vue';

  export default {
    components: {VueUeditorWrap, upload},
    data() {
      return {
        /*tabs切换*/
        isA: true,
        isB: false,
        isC: false,
        /*标题*/
        subj: '慢性阻塞性肺',
        /*上传图片*/
        echo: '',
        picture: '',
        /*说明*/
        define: '慢性阻塞性肺疾病(chronic obstructive pulmonary disease，COPD)简称慢阻肺，是一种常见 的以气流受限为特征的可以预防和治疗的疾病，气 流受限多呈进行性发展，与气道和肺对有毒颗粒或 气体的慢性炎症反应增强有关。',
        Typical_symptoms: '慢性和进行性加重的呼吸困难、咳嗽和咳痰',
        /*共同*/
        cure: true,
        diagnose: true,
        imaging: true,
        illness: true,
        /*富文本编辑器*/
        msg: '1.吸烟是慢阻肺最重要的环境发病因素。2.大气中直径2.5—10仙m的颗粒物，即PM (particulate matter)2+5和PMl0可能与慢阻肺的发 生有一定关系\\"。职业性粉尘(二氧化硅、煤尘、棉尘和蔗尘 等)及化学物质(烟雾、过敏原、工业废气和室内空 气污染等)的浓度过大或接触时间过久，均可导致慢阻肺的发生。4.使用生物燃料烹饪时产生的大量烟雾可能是不吸烟妇女发生慢阻肺的重要原因。5.反复呼吸道感染是慢阻肺发病和加剧的另一个重要因素”。6.社会经济地位与慢阻肺的发病相关。7.慢阻肺有遗传易感性，已知的遗传因素为1一抗胰蛋白酶缺乏，重度仅1.抗胰蛋白酶缺乏与非 吸烟者的肺气肿形成有关。',
        myConfig: {
          UEDITOR_HOME_URL: './static/ue/',
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 200,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 关闭自动保存
          enableAutoSave: false,
          maximumWords: 350
        },
        msg1: '(1)年龄I>35岁。(2)吸烟或长期接触“二手烟”污染。 (3)患有某些特定疾病，如支气管哮喘、过敏性鼻炎、慢性支气管炎、肺气肿。 (4)直系亲属中有慢阻肺家族史。 (5)居住在空气污染严重地区，尤其是二氧化硫等有害气体污染的地区。 (6)长期从事接触粉尘、有毒有害化学气体、重金属颗粒等工作。 (7)在婴幼儿时期反复患下呼 (8)居住在气候寒冷、潮湿地 区以及使用燃煤、木柴取暖。(9)维生素A缺乏或者胎儿时 期肺发育不良。(10)营养状况较差，体重指数 较低。 ',
        myConfig1: {
          UEDITOR_HOME_URL: './static/ue/',
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 200,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 关闭自动保存
          enableAutoSave: false,
          maximumWords: 400
        },
        /*年龄受到影响*/
        age1: '0',
        age2: '0',
        age3: '0',
        age4: '0',
        age5: '0',
        age6: '0',
        age7: '0',
        /*来源*/
        source: '慢性阻塞性肺疾病基层诊疗指南 (实践版·2018)',
        source1: '慢性阻塞性肺疾病基层诊疗指南 (实践版·2018)',
        source2: '慢性阻塞性肺疾病基层诊疗指南 (实践版·2018)',
      }
    },
    watch: {
      age1: (age1) => {
        if (age1) {
          if (age1 <= 30) {
            document.getElementById("nianling1").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
            document.getElementById("nianling1").style.width = age1 + '%';
          } else if (age1 > 30 && age1 <= 60) {
            document.getElementById("nianling1").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
            document.getElementById("nianling1").style.width = age1 + '%';
          } else if (age1 > 60 && age1 <= 100) {
            document.getElementById("nianling1").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
            document.getElementById("nianling1").style.width = age1 + '%';
          } else if (age1 > 100) {
            document.getElementById("nianling1").style.width = 100 + '%';
          }
        }
      },
      age2: (age2) => {
        if (age2) {
          if (age2 <= 30) {
            document.getElementById("nianling2").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
            document.getElementById("nianling2").style.width = age2 + '%';
          } else if (age2 > 30 && age2 <= 60) {
            document.getElementById("nianling2").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
            document.getElementById("nianling2").style.width = age2 + '%';
          } else if (age2 > 60 && age2 <= 100) {
            document.getElementById("nianling2").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
            document.getElementById("nianling2").style.width = age2 + '%';
          } else if (age2 > 100) {
            document.getElementById("nianling2").style.width = 100 + '%';
          }
        }
      },
      age3: (age3) => {
        if (age3) {
          if (age3 <= 30) {
            document.getElementById("nianling3").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
            document.getElementById("nianling3").style.width = age3 + '%';
          } else if (age3 > 30 && age3 <= 60) {
            document.getElementById("nianling3").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
            document.getElementById("nianling3").style.width = age3 + '%';
          } else if (age3 > 60 && age3 <= 100) {
            document.getElementById("nianling3").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
            document.getElementById("nianling3").style.width = age3 + '%';
          } else if (age3 > 100) {
            document.getElementById("nianling3").style.width = 100 + '%';
          }
        }
      },
      age4: (age4) => {
        if (age4) {
          if (age4 <= 30) {
            document.getElementById("nianling4").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
            document.getElementById("nianling4").style.width = age4 + '%';
          } else if (age4 > 30 && age4 <= 60) {
            document.getElementById("nianling4").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
            document.getElementById("nianling4").style.width = age4 + '%';
          } else if (age4 > 60 && age4 <= 100) {
            document.getElementById("nianling4").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
            document.getElementById("nianling4").style.width = age4 + '%';
          } else if (age4 > 100) {
            document.getElementById("nianling4").style.width = 100 + '%';
          }
        }
      },
      age5: (age5) => {
        if (age5) {
          if (age5 <= 30) {
            document.getElementById("nianling5").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
            document.getElementById("nianling5").style.width = age5 + '%';
          } else if (age5 > 30 && age5 <= 60) {
            document.getElementById("nianling5").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
            document.getElementById("nianling5").style.width = age5 + '%';
          } else if (age5 > 60 && age5 <= 100) {
            document.getElementById("nianling5").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
            document.getElementById("nianling5").style.width = age5 + '%';
          } else if (age5 > 100) {
            document.getElementById("nianling5").style.width = 100 + '%';
          }
        }
      },
      age6: (age6) => {
        if (age6) {
          if (age6 <= 30) {
            document.getElementById("nianling6").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
            document.getElementById("nianling6").style.width = age6 + '%';
          } else if (age6 > 30 && age6 <= 60) {
            document.getElementById("nianling6").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
            document.getElementById("nianling6").style.width = age6 + '%';
          } else if (age6 > 60 && age6 <= 100) {
            document.getElementById("nianling6").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
            document.getElementById("nianling6").style.width = age6 + '%';
          } else if (age6 > 100) {
            document.getElementById("nianling6").style.width = 100 + '%';
          }
        }
      },
      age7: (age7) => {
        if (age7) {
          if (age7 <= 30) {
            document.getElementById("nianling7").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
            document.getElementById("nianling7").style.width = age7 + '%';
          } else if (age7 > 30 && age7 <= 60) {
            document.getElementById("nianling7").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
            document.getElementById("nianling7").style.width = age7 + '%';
          } else if (age7 > 60 && age7 <= 100) {
            document.getElementById("nianling7").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
            document.getElementById("nianling7").style.width = age7 + '%';
          } else if (age7 > 100) {
            document.getElementById("nianling7").style.width = 100 + '%';
          }
        }
      },
    },
    methods: {
      ABOUT() {
        this.isA = true;
        this.isB = false;
        this.isC = false;
      },
      SYMPTOMS() {
        this.isA = false;
        this.isB = true;
        this.isC = false;
      },
      TREATMENTS() {
        this.isA = false;
        this.isB = false;
        this.isC = true;
      },
      /*上传图片*/
      returnValue1(data) {
        this.echo = '';
        this.picture = data
      },
      /*提交*/
      submit() {
        let obj = {
          subj: this.subj,
          img: this.picture,
          about: [{
            define: this.define,
            common: {
              medical_icon: [
                {
                  is_professional: '',
                  is_medical_clinical: '',
                  is_test: '',
                  is_Chronic: '',
                }
              ],
              cause: this.msg,
              age: {
                one: this.age1,
                two: this.age2,
                three: this.age3,
                four: this.age4,
                five: this.age5,
                six: this.age6,
                seven: this.age7,
              },
              source: this.source,
            }
          }],
          symptoms: {
            Typical_symptoms: this.Typical_symptoms,
            Diagnostic_criteria: this.msg1,
            source: this.source1,
          },
          treatments: {
            source: this.source2,
          },
        };
        if (this.cure == false) {
          obj.about[0].common.medical_icon[0].is_professional = '0'
        } else {
          obj.about[0].common.medical_icon[0].is_professional = '1'
        }
        if (this.diagnose == false) {
          obj.about[0].common.medical_icon[0].is_medical_clinical = '0'
        } else {
          obj.about[0].common.medical_icon[0].is_medical_clinical = '1'
        }
        if (this.imaging == false) {
          obj.about[0].common.medical_icon[0].is_test = '0'
        } else {
          obj.about[0].common.medical_icon[0].is_test = '1'
        }
        if (this.illness == false) {
          obj.about[0].common.medical_icon[0].is_Chronic = '0'
        } else {
          obj.about[0].common.medical_icon[0].is_Chronic = '1'
        }

        console.log(JSON.stringify(obj))


        // this.POST('http://47.104.101.207:8080/atlas/save', obj)
        this.POST('http://192.168.1.80:8081/atlas/save', obj)

      },
      /*POST请求*/
      POST(Url, Obj) {
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          url: Url,
          data: JSON.stringify(Obj),
        }).then((res) => {
          if (res.data) {
            this.$message.success('添加成功！');
          }
        })
      },
    },
  }
</script>

<style scoped>
  .wrapper {
    width: 1300px;
    margin: 0 auto;
    padding: 50px 0;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  .handle-input {
    width: 400px;
    display: inline-block;
  }

  /*左侧*/
  .advertising .share {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #00ACC1;
    min-height: 64px;
  }

  .advertising .share .Lung {
    padding: 12px 16px;
    height: 100%;
  }

  .advertising .share .Lung .spn1 {
    font-size: 24px;
    line-height: 1.4;
    color: #FFF;
  }

  /*tabs标签*/
  .advertising .tabs {
    background-color: #0093A3;
    display: block;
    overflow: hidden;
    margin: 0;
  }

  .advertising .tabs .label {
    width: 32.5%;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    padding-top: 15px;
    padding-bottom: 12px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.70);
  }

  .advertising .tabs .label_0 {
    border-bottom: 4px solid;
    border-bottom-color: #FEEA3D;
    color: #FEEA3D;
  }

  /*关于*/
  .advertising .ABOUT {
    border: 1px solid #ebebeb;
    border-radius: 5px;
  }

  .advertising .ABOUT .explain {
    padding: 16px;
    border-bottom: 1px solid #ebebeb;
  }

  .advertising .ABOUT .Common {
    padding: 18px 16px 10px;
  }

  .advertising .ABOUT .Common_c {
    font-size: large;
    color: rgba(0, 172, 193, 1);
    padding-bottom: 4px;
    font-weight: bold;
  }

  .advertising .ABOUT .UtTKTd {
    padding: 0 16px 10px;
  }

  .advertising .ABOUT .UtTKTd div {
    padding-top: 8px;
  }

  .advertising .ABOUT .UtTKTd .S1C7Re {
    padding-top: 8px;
    margin-left: 18px;
  }

  .advertising .ABOUT .yfM7Gf {
    padding: 1px 16px 8px;
    line-height: 1.4;
  }

  .advertising .ABOUT .yfM7Gf .V7ewqe {
    padding-bottom: 8px;
  }

  .advertising .ABOUT .K9xsvf {
    padding: 0 16px;
  }

  .advertising .ABOUT .K9xsvf .CTannb {
    padding-bottom: 10px;
    padding-top: 18px;
    font-size: large;
    color: rgba(0, 172, 193, 1);
    font-weight: bold;
  }

  .advertising .ABOUT .K9xsvf .dkJQbe {
    border-spacing: 0;
    width: 100%;
    padding-bottom: 12px;
  }

  .advertising .ABOUT .K9xsvf .dkJQbe td:first-child {
    height: 20px;
    line-height: 20px;
    width: 48px;
  }

  .advertising .ABOUT .K9xsvf .dkJQbe td:last-child div {
    height: 20px;
  }

  .advertising .ABOUT .K9xsvf .dkJQbe td {
    padding-top: 2px;
    padding-bottom: 0;
  }

  .advertising .ABOUT .K9xsvf .Y77G4d {
    color: rgba(0, 0, 0, .87);
  }

  .advertising .ABOUT .K9xsvf .dkJQbe .XXMfyd {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .advertising .ABOUT .K9xsvf .dkJQbe .Nl4tp {
    background-color: rgba(0, 172, 193, 0.3);
    width: 0%;
  }

  .advertising .ABOUT .K9xsvf .dkJQbe .hcd6lc {
    background-color: rgba(0, 172, 193, 0.5);
    width: 0%;
  }

  .advertising .ABOUT .K9xsvf .dkJQbe .KXQDpb {
    background-color: rgba(0, 172, 193, 0.7);
    width: 0%;
  }

  .advertising .ABOUT .EwuLE {
    padding: 0 16px;
  }

  .advertising .ABOUT .K9xsvf {
    padding: 5px 16px 12px;
  }

  .receive div {
    padding: 3px 0;
  }

  .age {
    display: inline-block;
    width: 50px;
  }

  /*症状*/
  .advertising .SYMPTOMS {
    border: 1px solid #ebebeb;
    border-radius: 5px;
  }

  .advertising .SYMPTOMS .MqFglb {
    font-weight: bold;
    padding: 18px 16px 4px;

    font-size: large;
    color: rgba(0, 172, 193, 1);
    font-weight: bold;

  }

  .advertising .SYMPTOMS .K9xsvf {
    line-height: 1.4;
    padding: 0 16px 16px 16px;
  }

  .advertising .SYMPTOMS .SwqzDd {
    border-top: 1px solid #ebebeb;
    padding: 18px 16px 12px;
  }

  .advertising .SYMPTOMS .SwqzDd .zu8hme {
    font-weight: bold;
    font-size: 16px;
    color: rgba(0, 0, 0, .87);
    padding-bottom: 5px;
  }

  .advertising .SYMPTOMS .SwqzDd .BWsxhd {
    line-height: 1.4;
    padding-bottom: 8px;
  }

  .advertising .SYMPTOMS .EwuLE {
    padding: 0 16px;
  }

  .advertising .SYMPTOMS .K9xsvf {
    padding: 5px 16px 12px;
  }

  /*疗程*/
  .advertising .TREATMENTS {
    border: 1px solid #ebebeb;
    border-radius: 5px;
  }
</style>
<style>
  html, body, #app {
    width: 100%;
    height: 100%;
    overflow: auto;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }
</style>
